<template>
  <div class="my_msg">
    <van-tabs class="msg_tab" sticky :active="msg" title-active-color="#1c6ad7" @click="switchTab">
      <van-tab title="所有消息" name="1"></van-tab>
      <van-tab title="待牵线" name="2"></van-tab>
      <van-tab title="已接受" name="3"></van-tab>
      <van-tab title="已拒绝" name="4"></van-tab>
      <van-tab title="已超时" name="5"></van-tab>
    </van-tabs>
    <div class="msg_container">
      <div class="" v-if="msg==1">所有消息</div>
      <div class="" v-else-if="msg==2">待牵线</div>
      <div class="" v-else-if="msg==3">已接受</div>
      <div class="" v-else-if="msg==4">已拒绝</div>
      <div class="" v-else>已超时</div>
      <van-empty
        class="custom-image"
        image="https://img.yzcdn.cn/vant/custom-empty-image.png"
        description="消息为空"
      />
    </div>
    
  </div>
</template>  
<script>
export default{
  data(){
    return{
      msg:1
    }
  },
  methods:{
    switchTab(e){
      const {name,title} = e.detail;
      console.log(name,title,'===切换')
      this.msg = name
    }
  }
}
</script>
<style scoped lang="scss">
.msg_tab{
  :deep(.van-tabs__wrap){
    .van-tabs__nav{
      .van-tabs__line{
        background-color: #1c6ad7;
      }
    }
  }
}
.msg_container{
  padding: 30rpx;
  background-color: #fff;
}
.custom-image{
  :deep(.van-empty){
    margin:100px auto;
    .van-empty__image{
      width: 100px;
      height: 100px;
    }
  }
}
</style> 